@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@layer base {
  * {
    @apply border-gray-200;
  }
  
  body {
    @apply bg-admin-bg text-slate-900 font-sans antialiased;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .glass-effect {
    @apply bg-white/80 backdrop-blur-md border border-white/20;
  }
  
  .card-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  
  .card-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  .btn-primary {
    @apply bg-admin-primary hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-admin-primary focus:border-transparent transition-all duration-200;
  }
  
  .status-pending {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
  }
  
  .status-processing {
    @apply bg-blue-100 text-blue-800 border-blue-200;
  }
  
  .status-completed {
    @apply bg-green-100 text-green-800 border-green-200;
  }
  
  .status-cancelled {
    @apply bg-red-100 text-red-800 border-red-200;
  }
  
  /* 数据表格样式 */
  .data-table {
    @apply w-full bg-white rounded-lg overflow-hidden card-shadow;
  }
  
  .data-table th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
  
  .data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
  }
  
  .data-table tr:hover {
    @apply bg-gray-50;
  }
  
  /* 状态徽章 */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border;
  }
  
  /* 侧边栏动画 */
  .sidebar-enter {
    transform: translateX(-100%);
  }
  
  .sidebar-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-out;
  }
  
  .sidebar-exit {
    transform: translateX(0);
  }
  
  .sidebar-exit-active {
    transform: translateX(-100%);
    transition: transform 300ms ease-in;
  }
}